<template>
  <div id="microclassification">
    <van-sticky offset-top="0">
      <div class="header">
        <div class="left" @click="goBack">
          <i class="fa fa-angle-left"></i>
        </div>
        <div class="search">
          <div class="searchion"><i class="iconfont iconfont icon-sousuo1"></i></div>
          <div class="textinp">
            <van-field v-model="commodityTitle" placeholder="请输入搜索关键词" :clearable="true" />
          </div>
        </div>
        <div class="right" @click="searchBtn">搜索</div>
      </div>
      <div class="top">
        <div class="Classification">
          <div class="left">
            <van-tabs v-model="selected" title-active-color="var(--themeBaseColor)" title-inactive-color="#00001C"
              color="#FE5E56" :ellipsis="false" line-width="20px">
              <van-tab v-for="(item, index) in catelist" :name="1 + index + ''" :key="index">
                <span slot="title" @click="swishTabTItem(item.id, index, item)">{{ item.name }}</span>
              </van-tab>
            </van-tabs>
          </div>
          <div class="right" @click="classificationShow">
            <div class="box-show"></div>
            <i :class="classificationHide ? 'iconfont icon-icon_down1' : 'iconfont icon-icon_up1'"></i>
          </div>
        </div>

        <div class="all_classification" :class="{ hide: classificationHide }">
          <div class="bottom">
            <ul>
              <li v-for="(item, index) in catelist" :key="index" @click="swishTabTItem(item.id, index, item)">
                {{ item.name }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="cate-box" v-show="classificationHide">
        <van-tabs v-model="selected_child" title-active-color="var(--themeBaseColor)" title-inactive-color="#00001C"
          color="#FE5E56" :ellipsis="false" line-width="0" line-height="0">
          <van-tab v-for="(item, index) in child_cate_list" :name="1 + index + ''" :key="index">
            <span slot="title" @click="switch_cate_child(item.id, index)">{{ item.name }}</span>
          </van-tab>
        </van-tabs>
      </div>
    </van-sticky>

    <div class="list">
      <div>
        <template v-for="(item, index) in catelistData">
          <div v-if="load" :key="index">
            <span v-show="selected == 1 + index + ''">
              <div class="video_list" v-if="item && item.length > 0">
                <!-- 微社区样式一 -->
                <c-flow :list="item" :showLoading="load" v-if="selected == index + 1 && micro_style_type == 0"></c-flow>
                <!-- 微社区样式二 -->
                <microCommunities :list="item" :showLoading="load"
                  v-if="selected == index + 1 && micro_style_type == '1'"></microCommunities>
                <!-- <van-list
                  v-model:loading="load"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                >
                  <c-flow :list="item" :showLoading="load" v-if="selected == index + 1"></c-flow>
                </van-list> -->
              </div>
              <div v-if="item.length == 0" style="margin: 12px;">该分类暂无内容 ~</div>
            </span>
          </div>
        </template>

      </div>
    </div>
    <div class="all_classificationmode" :class="{ hide: classificationHide }" @click="classificationHide = true"></div>
  </div>
</template>

<script>
import microclassification_controller from "./microclassification_controller";
export default microclassification_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.van-sticky--fixed .cate-box {
  background-color: #fff;
  padding-bottom: 0.5625rem !important;
}

.van-sticky--fixed .cate-box ::v-deep .van-tab{
  background-color: #F5F5F5 !important;
  border: 1px solid #f5f5f5;
}
.cate-box ::v-deep .van-tabs {
  width: 100%;
}

.cate-box ::v-deep .van-tabs__nav {
  background-color: transparent;
}

.cate-box ::v-deep .van-tab {
  height: 1.5rem;
  line-height: 1.5rem;
  padding: 0 0.75rem;
  background-color: #fff;
  width: auto;
  border: 1px solid #fff;
  flex: unset;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-right: 0.5rem;
  font-weight: 400;
  font-size: 0.8125rem;
  color: #00001C;
  flex-shrink: 0;
}

.cate-box ::v-deep .van-tabs__nav--line {
  padding-bottom: 0;
}

::v-deep .van-tabs__line {
  background-color: var(--themeBaseColor) !important;
}

.cate-box ::v-deep .van-tab--active {
  border: 1px solid var(--themeBaseColor);
  position: relative;
  color: var(--themeBaseColor);
  z-index: 10;

}

.cate-box ::v-deep .van-tab--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.5;
  background-color: var(--themeBaseColor);
}

.cate-box ::v-deep .van-tabs--line .van-tabs__wrap {
  height: max-content;
}

.Classification ::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
  margin-right: 3.5rem;
}

::v-deep .van-tabs__line {
  bottom: 20px;
}

#microclassification {

  .header {
    display: flex;
    align-items: center;
    padding-top: 0.63rem;
    padding-bottom: 0.63rem;
    background: #fff;

    .left {
      font-size: 1.5rem;
      margin-left: 1.06rem;
      margin-right: 1.44rem;
    }

    .search {
      display: flex;
      width: 17.19rem;
      height: 1.88rem;
      background-color: #f5f5f5;
      border-radius: 0.94rem;
      align-items: center;

      .searchion {
        font-size: 0.81rem;
        color: #999;
        margin-left: 0.5rem;
        margin-right: 0.41rem;
      }

      .van-cell {
        background-color: transparent;
        padding: 0;
      }
    }

    .right {
      font-size:0.8125rem;
      color: var(--themeBaseColor);
      margin-left: .8438rem;
      flex-shrink: 0;
      margin-right: .75rem;
    }
  }

  .top {
    position: relative;

    .Classification {
      display: flex;


      .left {
        flex: 1;
        overflow-x: scroll;
        width: 85%;
        background-color: #fff;
      }

      .right {
        background: white;
        z-index: 99;
        position: absolute;
        bottom: 0.35rem;
        right: 0;
        width: 3.2rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .box-show {
          height: 103%;
          width: 1rem;
          box-shadow: -6px 0 10px -5px rgba(170, 170, 179, 0.5);
          position: absolute;
          left: 0;
          bottom: -0.2rem;
        }
      }
    }

    .all_classification {
      position: absolute;
      top: 2.5rem;
      left: 0;
      right: 0;
      bottom: 0;
      height: max-content;
      overflow: auto;
      z-index: 10;
      border-top: 1px solid #F5F5F5;
      background: #fff;

      .bottom {
        padding-top: 1.16rem;
        padding-bottom: 0.625rem;

        ul {
          padding-left: 0.75rem;
          padding-right: 0.75rem;
          display: flex;
          flex-wrap: wrap;

          li {
            font-size: 0.8125rem;
            line-height: 2rem;
            height: 2rem;
            padding: 0 .5rem;
            margin-right: 0.63rem;
            margin-bottom: 0.63rem;
            background-color: #F0F0F1;
            border-radius: 0.5rem;
          }
        }
      }
    }

    .all_classification.hide {
      display: none;
    }
  }

  .list {
    .video_list {
      ul {
        margin-top: 0.5rem;
        display: flex;
        flex-wrap: wrap;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        justify-content: space-between;

        li {
          border-radius: 0.38rem;
          width: 10.59rem;
          background-color: #fff;
          padding-bottom: 0.69rem;
          margin-bottom: 0.75rem;

          .top {
            min-height: 14.06rem;

            img {
              width: 100%;
            }
          }

          .bottom {
            padding-left: 0.59rem;

            .title {
              padding-top: 0.63rem;
              font-size: 0.84rem;
              line-height: 0.84rem;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              text-align: left;
              margin-bottom: 0.59rem;
            }

            .content {
              display: flex;
              justify-content: space-between;

              .headmessage {
                display: flex;

                .left {
                  width: 1.13rem;
                  height: 1.13rem;
                  border-radius: 50%;

                  img {
                    width: 100%;
                    height: 100%;
                  }
                }

                .name {
                  margin-left: 0.31rem;
                  height: 1.13rem;
                  line-height: 1.13rem;
                  text-align: left;
                  color: #8c8c8c;
                  font-size: 0.69rem;
                }
              }

              .thumbup {
                display: flex;
                padding-top: 0.16rem;

                .right {
                  width: 0.81rem;
                  height: 0.84rem;
                  margin-right: 0.38rem;

                  img {
                    width: 100%;
                    height: 100%;
                  }
                }

                .num {
                  min-width: 2rem;
                  max-width: 8rem;
                  text-align: left;
                  color: #333;
                  font-size: 0.75rem;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }
          }
        }
      }
    }
  }

  .cate-box {
    display: flex;
    padding: 0.625rem .75rem 0;
    width: 100%;
    overflow: scroll;

    .cate-child-box {
      height: 1.5rem;
      line-height: 1.5rem;
      padding: 0 0.75rem;
      background: #fff;
      border: 1px solid #fff;
      border-radius: 0.75rem;
      overflow: hidden;
      margin-right: 0.5rem;
      font-weight: 400;
      font-size: 0.8125rem;
      color: #00001C;
      flex-shrink: 0;
    }

    .active-cate-child {
      border: 1px solid var(--themeBaseColor);
      position: relative;
      z-index: 10;
      color: var(--themeBaseColor);
    }

    .active-cate-child::after {
      background-color: var(--themeBaseColor);
      z-index: -1;
      content: "";
      left: 0;
      right: 0;
      opacity: 0.5;
      top: 0;
      bottom: 0;
    }
  }

  .all_classificationmode {
    position: fixed;
    top: 5.89rem;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.5);
  }

  .all_classificationmode.hide {
    display: none;
  }
}
</style>
